<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜菜子生日快乐</title>
 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
   

    <!-- 快捷导航栏 -->
  <div class="shortcut">
     <div class="w">
<class="fl">
    <ul>
        <li>菜儿欢迎你！</li>
    <li>
        <a href="">登录</a>
    <a href="" class="style-red">注册</a>
</li>
</ul>
</div>
<div class="w">
<div class="fr">
    
    <ul><li><a href=""> 快乐订购</a>
       </li>
        <li class="spacer"></li>
    <li>
        <a href="">我的</a>
       
        <i class="icomoon"></i>
    </li>
    <li class="spacer"></li>
<li><a href="">菜菜网会员</a></li>
<li class="spacer"></li>
<li><a href="">菜菜采购</a></li>
<li class="spacer"></li>
<li><a href="">关注菜菜子</a>
    <i class="icomoon"></i>
</li>

<li class="spacer"></li>
<li><a href="">菜菜服务</a>
    <i class="icomoon"></i>
</li>
<li class="spacer"></li>
<li><a href="">菜菜导航</a>
    <i class="icomoon"></i>
</li></ul>
</div>
      </div>
     </div>
  </div>
  <!-- head -->
  <div class="header w">
      <div class="logo">
          <h1><a href="index.html " title="品优购">菜菜子</a></h1>
        </div>
          <!-- search -->
          <div class="search" >
              <input type="text" class="text" value="1530就是最叼的">
              <button class="button">搜索</button></div>
              <!-- hotwrods -->
              <div class="hotwrods">
                  <a href="">菜菜购物</a>
                  <a href="">一个水水子</a>
                  <a href="">一个赖赖子</a>
                  <a href="">一个瑾瑾子</a>
                  <a href="">一个歪歪子</a>
                  <a href="">一个敏敏子</a>
                  <a href="">一个方方子</a>
                                           
         </div>
<div class="shopcar">
    <i class="car"></i>
    我的购物车
<i class="arrow"></i>
<i class="count">8</i></div>
  </div>
  <!-- nav -->
  <div class="nav">
      <div class="w">
          <div class="dropdown">
              <div class="dt">全部商品分类</div>
              <div class="dd" >
                
                <ul></ul>
                    <li class="menu_item"><a href="">远在外地</a><i></i></li>
                <li class="menu_item">
                    <a href="">斤斤</a>、
                    <a href="">琪琪</a>、
                    <a href="">水水</a>
                    <i></i></li>
                <li class="menu_item"><a href="">发来祝贺</a><i></i></li>
                <li class="menu_item"><a href="">我们今晚吃的两个包子</a><i></i></li>
                <li class="menu_item"><a href="">而你们</a><i></i></li>
                <li class="menu_item"><a href="">居然在吃</a><i></i></li>
                <li class="menu_item"><a href="">蛋糕！🎂🎂🎂</a><i></i></li>
                <li class="menu_item"><a href="">炸鸡</a><i></i></li>
                <li class="menu_item"><a href="">奶茶</a><i></i></li>
                <li class="menu_item"><a href="">可恶！</a><i></i></li>
                <li class="menu_item"><a href="">我不想编了</a><i></i></li>
                <li class="menu_item"><a href="">马上就要下课了</a><i></i></li>
                <li class="menu_item"><a href="">最后</a><i></i></li>
                <li class="menu_item"><a href="">嗯嗯</a>、
                    <a href="">生日</a>
                    <a href="">快乐</a>
                    
                    <i></i></li></ul>
            </div>  
          </div> 
          <div class="navitems">
              <ul>
            <li><a href="">变成富婆</a></li>
            <li><a href="">美丽达人</a></li>
            <li><a href="">考研顺利</a></li>
            <li><a href="">男人不疼</a></li>
            <li><a href="">姐妹来爱</a></li>
            <li><a href="">某男勿醋</a></li>
            <li><a href="">菜某人人爱</a></li>
            
        </ul> 
                                                                                                  </div>
      </div>
</div>
</div>
<!-- nav end -->
<div class="w"><div class="main">
    <div class="focus fl">
        <a href="#" class="arrow_l"> </a>
            <a href="#" class="arrow_r"> < </a>
            <ul>
                <li><a href=""><img src="upload/focus.jpg.jpg" alt=""></a></li></ul>
    <ol class="circle">
        <li></li>
        <li></li>
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    </div>
    <div class="newsflash fr">
        <div class="news">
            <div class="news1">
                品优购快报<a href="#">更多</a>
            </div>
            <div class="news2">
                <ul>
                    <li><a href="#">【特惠】备战开学季备</a></li>
                    <li><a href="#">【特惠】备战开学季备</a></li>
                    <li><a href="#">【特惠】备战开学季备</a></li>
                    <li><a href="#">【特惠】备战开学季备</a></li>
                    <li><a href="#">【特惠】备战开学季备</a></li>
   
                           </ul>
            </div>
        </div>
        <div class="liveservice"><ul>
                    <li>
                        <a href=""><i class="service-ico1 gonggong"></i><p>话费</p></a></li>
                        <li>
                            <a href=""><i class="service-ico2 gonggong"></i><p>彩票</p></a></li>
                            <li>
                                <a href=""><i class="service-ico3 gonggong"></i><p>电影票</p></a></li>
                                <li>
                                    <a href=""><i class="service-ico1 gonggong"></i><p>话费</p></a></li>
                                    <li>
                                        <a href=""><i class="service-ico1 gonggong"></i><p>话费</p></a></li>
                                        <li>
                                            <a href=""><i class="service-ico1 gonggong"></i><p>话费</p></a></li>
                                            <li>
                                                <a href=""><i class="service-ico1 gonggong"></i><p>话费</p></a></li>
                                                <li>
                                                    <a href=""><i class="service-ico8 gonggong"></i><p>火车票</p></a><span class="hot"></span></li>

                                                    <li>
                                                        <a href=""><i class="service-ico1 gonggong"></i><p>话费</p></a></li>

                                                        <li>
                                                            <a href=""><i class="service-ico1 gonggong"></i><p>话费</p></a></li>

                                                            <li>
                                                                <a href=""><i class="service-ico1 gonggong"></i><p>话费</p></a></li>

                                                                <li>
                                                                    <a href=""><i class="service-ico1 gonggong"></i><p>话费</p></a></li>

                                                                    

        </ul> </div>
        <div class="bargin"><img src="upload/szj.jpg" alt=""></div>
        
    </div>
</div></div>
<!-- recommand start -->
<div class="recommand w">
    <div class="recom-hd fl"><img src="img/clock.png" alt=""><p>今日推荐</p></div>
    <div class="recom-bd fl"><ul>
        <li><img src="upload/pic1.jpg" alt=""></li>
        <li><img src="upload/pic2.jpg" alt=""></li>
        <li><img src="upload/pic1.jpg" alt=""></li>
        <li ><img src="upload/pic2.jpg" alt=""></li>
    </ul>
    </div>
 </div>

 <div class="like w">
    <div class="like-hd"><h3>今日喜欢</h3><a href="">换一批</a>
    </div>
    <div class="like-bd"><ul>
      <li>
          <ul>
          <li><a href=""><img src="upload/baobao.png" alt=""> </a></li>
          <li class="baobao">阳光美包新款单肩包女</br>  
            包时尚子母包四件套女<p>$999</p></li>
           
      </ul></li>
      <li>
        <ul>
        <li><a href=""><img src="upload/guo.png" alt=""> </a></li>
        <li class="baobao">阳光美包新款单肩包女</br>  
          包时尚子母包四件套女<p>$999</p></li>
         
    </ul></li>
    <li>
        <ul>
        <li><a href=""><img src="upload/baobao.png" alt=""> </a></li>
        <li class="baobao">阳光美包新款单肩包女</br>  
          包时尚子母包四件套女<p>$999</p></li>
         
    </ul></li>
    <li>
        <ul>
        <li><a href=""><img src="upload/guo.png" alt=""> </a></li>
        <li class="baobao">阳光美包新款单肩包女</br>  
          包时尚子母包四件套女<p>$999</p></li>
         
    </ul></li>
    <li>
        <ul>
        <li><a href=""><img src="upload/baobao.png" alt=""> </a></li>
        <li class="baobao">阳光美包新款单肩包女</br>  
          包时尚子母包四件套女<p>$999</p></li>
         
    </ul></li>
    <li>
        <ul>
        <li><a href=""><img src="upload/guo.png" alt=""> </a></li>
        <li class="baobao last">阳光美包新款单肩包女</br>  
          包时尚子母包四件套女<p>$999</p></li>
         
    </ul></li>
    </ul></div>
</div>
<div class="chuanzhi w">
    <div class="chuanzhi-hd "><h3>传智播客.有趣</h3></div>
<div class="chuanzhi-bd"><ul>
    <li class="w404"><a href=""><img src="upload/book.png" alt=""></a></li>
    <li class="w225"><div class="hd1">
        <p>好东西</p></div>
    <div class="yifu"><a href=""><img src="upload/leishen.png" alt=""></a></div>
    <div class="yifu"><a href=""><img src="upload/yifu.png" alt=""></a></div></li>
    <li class="w404 color1"><div class="hd2">
        <p>品牌街</p></div>
    <div class="suboer"><a href=""><img src="upload/suboer.png" alt=""></a></div>
    <div class="yifu"><ul>
        <li><a href=""><img src="upload/adidas.png" alt=""></a></li>
        <li><a href=""><img src="upload/adidas.png" alt=""></a></li>
    </ul></div>
   </li></li>
    <li class="w162"><ul>
        <li><a href=""><img src="upload/huawei.png" alt=""></a></li>
        <li><a href=""><img src="upload/huawei.png" alt=""></a></li>
        <li><a href=""><img src="upload/huawei.png" alt=""></a></li>
        <li><a href=""><img src="upload/huawei.png" alt=""></a></li>
        <li><a href=""><img src="upload/huawei.png" alt=""></a></li>
        <li><a href=""><img src="upload/huawei.png" alt=""></a></li>
        <li><a href=""><img src="upload/huawei.png" alt=""></a></li>
        <li><a href=""><img src="upload/huawei.png" alt=""></a></li>
        <li><a href=""><img src="upload/huawei.png" alt=""></a></li>
        <li><a href=""><img src="upload/huawei.png" alt=""></a></li>
        <li><a href=""><img src="upload/huawei.png" alt=""></a></li>
        <li><a href=""><img src="upload/huawei.png" alt=""></a></li>
        <li><a href=""><img src="upload/huawei.png" alt=""></a></li>
        <li><a href=""><img src="upload/huawei.png" alt=""></a></li>
        

    </ul></li>
</ul></div></div>  

<!-- recommand end -->        
<!-- floor start -->
<div class="floor ">
    <div class="jiadian w">
        <div class="box-hd"><h3>家用电器</h3>
            <div class="tab-list">
                <ul>
                <li><a href="#"class="style-red">热门</a>|</li>
                <li><a href="#">大家电</a>|</li>
                <li><a href="#">生活电器</a>|</li>
                <li><a href="#">厨房电器</a>|</li>
                <li><a href="#">个护健康</a>|</li>
                <li><a href="#">应季电器</a>|</li>
                <li><a href="#"> 空气/净水</a>|</li>
                <li><a href="#">新奇特</a>|</li>
                <li><a href="#">高端电器</a>|</li>


            </ul></div>
        </div>
        <div class="box-bd">
            
        <ul class="tab-con">
               <li class="w209">
                   <ul class="tab-con-list">
                   <li><a href="">节能补贴</a></li>
                   <li><a href="">4k电视</a></li>
                   <li><a href="">电热水器</a></li>
                   <li><a href="">节能补贴</a></li>
                   <li><a href="">节能补贴</a></li>
                   <li><a href="">节能补贴</a></li>
               </ul>
               <img src="upload/sanxing.png" alt=""></li>
               <li class="w329"><img src="upload/shuihu.png" alt=""></li>
               <li class="w220">
                   <div class="tab-con-item"><a href=""><img src="upload/leshi.jpg" alt=""></a>
          </div>
          <div class="tab-con-item"><a href=""><img src="upload/leshi.jpg" alt=""></a>
          </div>
        </li>
               <li class="w220">
                   <div class="tab-con-item"><a href=""><img src="upload/shuiguo.jpg" alt=""></a></div>
                   <ol class="circle1">
                       <li></li>
                       <li class="current1"></li>
                       <li></li>
                   </ol>
               </li>
               <li class="w220"> <div class="tab-con-item"><a href=""><img src="upload/leshi.jpg" alt=""></a>
               </div>
               <div class="tab-con-item"><a href=""><img src="upload/leshi.jpg" alt=""></a>
               </div></li>
            </ul>
            
        </div>       
</div>

<!-- 品牌 -->
<div class="pinpai w"><ul>
    <li><a href=""><img src="upload/fk.png" alt=""></a></li>
    <li><a href=""><img src="upload/fk.png" alt=""></a></li>
    <li><a href=""><img src="upload/fk.png" alt=""></a></li>
    <li><a href=""><img src="upload/fk.png" alt=""></a></li>
    <li><a href=""><img src="upload/fk.png" alt=""></a></li>
    <li><a href=""><img src="upload/fk.png" alt=""></a></li>
    <li><a href=""><img src="upload/fk.png" alt=""></a></li>
    <li><a href=""><img src="upload/fk.png" alt=""></a></li>
    <li><a href=""><img src="upload/fk.png" alt=""></a></li>
    <li><a href=""><img src="upload/fk.png" alt=""></a></li>

</ul></div>
 <div class="shouji w">
    <div class="box-ld"><h3>手机通讯</h3>
   <div class="table-list1">
   <ul>
    <li><a href="">热门</a>|</li> 
    <li><a href="">新机尝鲜</a>|</li>
    <li><a href="">高性价比</a>|</li>
    <li><a href="">口碑推荐</a>|</li>    
    <li><a href="">合约机</a>|</li>
    <li><a href="">手机卡</a>|</li>
    <li><a href="">店铺精选</a>|</li>
    <li><a href="">手机配送</a>|</li>
    
</ul></div></div>
    <div class="box-jd">
        <ul class="tab-con1">
            <li class="ww209">
                <ul class=shouji-list>
                    <li><a href="">手机通信</a></li>
                    <li><a href="">手机通信</a></li>
                    <li><a href="">手机通信</a></li>
                    <li><a href="">手机通信</a></li>
                    <li><a href="">手机通信</a></li>
                    <li><a href="">手机通信</a></li>
                </ul>
                <a href=""><img src="upload/zx.png" alt=""></a>
            </li>
            <li class="ww329"><a href=""><img src="upload/green.png" alt=""></a></li>
            <li class="ww219">
                <div class="table"><a href=""><img src="upload/mate.png" alt=""></a></div>
                <div class="table"><a href=""><img src="upload/mate.png" alt=""></a></div></li>
            <li class="ww219"><a href=""><img src="upload/G9_03.png" alt=""></a></li>
            <li class="ww219"><div class="table"><a href=""><img src="upload/mate.png" alt=""></a></div>
                <div class="table"><a href=""><img src="upload/mate.png" alt=""></a></div></li>
        </ul>
        
    </div>
</div>
</div> 

<!-- floor end固定定位不需要父级 随便写哪都行 li不用给链接 先走浏览器50% 再走版心一半-600 再加自己的宽度 -->
<div class="fixedtool"><ul>
    <li class="current">家用电器</li>
    <li>手机通讯</li>
    <li>电脑办公</li>
    <li>家具家居</li>
    <li>生活用品</li>
    <li>美女基地</li>
</ul></div>


<!-- footor start --> 
<div class="footer ">
    <div class="w">
        <div class="mod_service">
            <ul>
                <li><i class="mod_serivce_icon mod_serivce_zheng"></i>
                <div class="mod_serivce_title">
                    <h5>菜菜</h5>
                <p>正品保障，提供发票</p></div></li>
                <li><i class="mod_serivce_icon mod_serivce_kuai"></i>
                    <div class="mod_serivce_title">
                        <h5>极速物流</h5>
                    <p>急速物流，急速送达</p></div></li>
                    <li><i class="mod_serivce_icon mod_serivce_wu"></i>
                        <div class="mod_serivce_title">
                            <h5>极速物流</h5>
                        <p>急速物流，急速送达</p></div></li>
                        <li><i class="mod_serivce_icon mod_serivce_te"></i>
                            <div class="mod_serivce_title">
                                <h5>极速物流</h5>
                            <p>急速物流，急速送达</p></div></li> 
                            <li><i class="mod_serivce_icon mod_serivce_bang"></i>
                                <div class="mod_serivce_title">
                                    <h5>极速物流</h5>
                                <p>急速物流，急速送达</p></div></li>    
                                   
            </ul>
        </div>
        <div class="mod_help">
            <dl class="mod_help_item">
                <dt>购物指南</dt>
                <dd><a href="">购物流程</a></dd>
                <dd><a href=""> 会员介绍</a></dd>
                <dd><a href="">生活旅行团购</a></dd>
                <dd><a href="">常见问题</a></dd>
                <dd><a href="">大家电</a></dd>
                <dd><a href="">联系客服</a></dd>
            </dl>
            <dl class="mod_help_item">
                <dt>购物指南</dt>
                <dd><a href="">购物流程</a></dd>
                <dd><a href=""> 会员介绍</a></dd>
                <dd><a href="">生活旅行团购</a></dd>
                <dd><a href="">常见问题</a></dd>
                <dd><a href="">大家电</a></dd>
                <dd><a href="">联系客服</a></dd>
            </dl>
            <dl class="mod_help_item">
                <dt>购物指南</dt>
                <dd><a href="">购物流程</a></dd>
                <dd><a href=""> 会员介绍</a></dd>
                <dd><a href="">生活旅行团购</a></dd>
                <dd><a href="">常见问题</a></dd>
                <dd><a href="">大家电</a></dd>
                <dd><a href="">联系客服</a></dd>
            </dl>
            <dl class="mod_help_item">
                <dt>购物指南</dt>
                <dd><a href="">购物流程</a></dd>
                <dd><a href=""> 会员介绍</a></dd>
                <dd><a href="">生活旅行团购</a></dd>
                <dd><a href="">常见问题</a></dd>
                <dd><a href="">大家电</a></dd>
                <dd><a href="">联系客服</a></dd>
            </dl>
            <dl class="mod_help_item">
                <dt>购物指南</dt>
                <dd><a href="">购物流程</a></dd>
                <dd><a href=""> 会员介绍</a></dd>
                <dd><a href="">生活旅行团购</a></dd>
                <dd><a href="">常见问题</a></dd>
                <dd><a href="">大家电</a></dd>
                <dd><a href="">联系客服</a></dd>
            </dl>
            <dl class="mod_help_item mod_help_app">
                <dt>购物指南</dt>
                <dd><img src="upload/erweima.png" alt="">
                    <p>品优购客户端</p></dd>
                      
            </dl>
           
                
        </div>

  <div class="mod_copyright">
      <p class="mod_copyright_links"><a href="">关于我们</a>|<a href="">联系我们</a>|<a href="">联系我们</a>|<a href="">联系我们</a>|<a href="">联系我们</a>|<a href="">关于我们</a>|<a href="">联系我们</a>|<a href="">联系我们</a>|<a href="">联系我们</a>|<a href="">联系我们</a>|<a href="">关于我们</a>|<a href="">关于我们</a> </p>
<p class="mod_copyright_info">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn</p>
    <p>京ICP备08001421号京公网安备110108007702</p>

    </div>
  
  
  
  
    </div>



</body>
</html>


</body>
</html>
<!--  -->